<!DOCTYPE html>
<html>
<head>
<title>Circuit Diagram</title>
</head>
<body>
<canvas id="circuitCanvas" width="500" height="400" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.font = 'bold 22px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';

    // Helper function to draw a resistor box.
    // It draws a white filled rectangle first to erase the wire underneath.
    const drawResistor = (x, y, w, h) => {
        ctx.fillStyle = 'white';
        ctx.fillRect(x - 1, y - h / 2 - 1, w + 2, h + 2);
        ctx.strokeRect(x, y - h / 2, w, h);
    };

    // Helper function to draw a terminal (open circle).
    const drawTerminal = (x, y, r) => {
        ctx.beginPath();
        ctx.arc(x, y, r, 0, 2 * Math.PI);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.stroke();
    };

    // Helper function to draw a junction dot.
    const drawJunction = (x, y, r) => {
        ctx.beginPath();
        ctx.arc(x, y, r, 0, 2 * Math.PI);
        ctx.fillStyle = 'black';
        ctx.fill();
    };

    // Define coordinates for the circuit layout
    const xL = 100, xR = 400; // Left and right x-coordinates of the parallel block
    const yT = 150, yB = 250; // Y-coordinates for the top and bottom branches
    const yTerm = 70;         // Y-coordinate for the terminals
    const xTermL = 200, xTermR = 300; // X-coordinates for the left and right terminals
    const resH = 24, dotR = 4; // Resistor height and junction dot radius

    // --- Draw Wires ---
    ctx.beginPath();

    // Top branch wire (will have resistors placed on it)
    ctx.moveTo(xL, yT);
    ctx.lineTo(xR, yT);

    // Bottom branch wire (will have a resistor placed on it)
    ctx.moveTo(xL, yB);
    ctx.lineTo(xR, yB);

    // Left and right vertical connecting wires
    ctx.moveTo(xL, yT);
    ctx.lineTo(xL, yB);
    ctx.moveTo(xR, yT);
    ctx.lineTo(xR, yB);

    // Wires from the parallel block to the terminals
    ctx.moveTo(xTermL, yTerm);
    ctx.lineTo(xL, yTerm);
    ctx.lineTo(xL, yT);
    ctx.moveTo(xTermR, yTerm);
    ctx.lineTo(xR, yTerm);
    ctx.lineTo(xR, yT);

    ctx.stroke(); // Draw all the wire paths

    // --- Draw Components (on top of the wires) ---

    // Define resistor positions and sizes
    const r1x = 140, r1w = 80; // 8.0 Ohm resistor
    const r2x = 280, r2w = 80; // 4.0 Ohm resistor
    const r3x = 200, r3w = 100; // 6.0 Ohm resistor

    // Draw the resistors on their respective branches
    drawResistor(r1x, yT, r1w, resH);
    drawResistor(r2x, yT, r2w, resH);
    drawResistor(r3x, yB, r3w, resH);

    // Draw the terminals
    drawTerminal(xTermL, yTerm, 5);
    drawTerminal(xTermR, yTerm, 5);

    // Draw the junction dots as shown in the image
    drawJunction(xL, yB, dotR);
    drawJunction(xR, yB, dotR);

    // --- Add Text Labels ---
    ctx.fillStyle = 'black';

    // Voltage and Resistance values
    ctx.fillText('24 V', (xTermL + xTermR) / 2, yTerm - 10);
    ctx.fillText('8.0 Ω', r1x + r1w / 2, yT - resH / 2 - 8);
    ctx.fillText('4.0 Ω', r2x + r2w / 2, yT - resH / 2 - 8);
    ctx.fillText('6.0 Ω', r3x + r3w / 2, yB - resH / 2 - 8);

    // Figure caption
    ctx.font = '24px Arial';
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 8.1', 250, 350);

</script>
</body>
</html>